<template>
  <div>
    <div class="left-bottom">
      <div class="floor-wide">
        <div class="arrow-icon" @click="upfloor()">
          <img src="@/assets/icons/arrow-up.svg" />
        </div>
        <div class="floor-list" ref="floorList">
          <div
            v-for="(item,index) in floors"
            :class="{'single-pick': item.isPick}"
            :key="index"
            class="floor-single"
            @click="pickFloor(item,index)"
          >L{{item.floor}}</div>
        </div>
        <div class="arrow-icon" @click="downfloor()">
          <img src="@/assets/icons/arrow-down.svg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {

  },
  mounted() {
    //初始化状态
    this.$refs.floorList.scrollTop = this.$refs.floorList.scrollHeight;
    this.floors[this.floors.length - 1]['isPick'] = true;
    this.recordNo = this.floors.length - 1;
  },
  data() {
    return {
      recordNo: Number,
      floors: [{
        floor: '6',
        isPick: false
      },
      {
        floor: '5',
        isPick: false
      },
      {
        floor: '4',
        isPick: false
      },
      {
        floor: '3',
        isPick: false
      },
      {
        floor: '2',
        isPick: false
      },
      {
        floor: '1',
        isPick: false
      }]
    }
  },
  methods: {
    pickFloor(item, index) {
      if (this.recordNo && this.recordNo == index) {
        return;
      }
      if (this.recordNo || this.recordNo == 0) {
        this.floors[this.recordNo]['isPick'] = false;
      }
      item.isPick = true;
      this.recordNo = index;
      this.$emit('floor', item.floor)
    },
    upfloor() {

    },
    downfloor() {

    }
  }
}
</script>

<style>
/** floorPane */
.left-bottom {
  position: absolute;
  bottom: 50px;
  left: 20px;
  z-index: 1;
}
.floor-wide {
  background-color: #f2f2f2;
  border: 1px #ccc solid;
  border-radius: 6px;
}
.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.floor-list {
  max-height: 180px;
  overflow-y: scroll;
}
.floor-list::-webkit-scrollbar {
  display: none;
}
.floor-single {
  padding: 10px;
}
.single-pick {
  background-color: dodgerblue;
  color: #ffffff;
}
</style>
